<template>
  <div class="main">
    <div class="home_content">
      <h1 @click="a" class="title">首页</h1>
      <el-row :gutter="30">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple content_item1">
            <span class="count">{{userCount}}</span>
            <span class="introduce">
              <i class="el-icon-user"></i> 用户总数
            </span>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple content_item2">
            <span class="count">{{productCount}}</span>
            <span class="introduce">
              <i class="el-icon-goods"></i> 商品总数
            </span>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple content_item3">
            <span class="count">{{orderCount}}</span>
            <span class="introduce">
              <i class="el-icon-edit"></i> 订单总数
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {home} from "@/request/http"
export default {
  data() {
    return {
      userCount: 0,
      productCount: 0,
      orderCount: 0,
      homelist: {}
    };
  },
  methods:{
    a(){
      this.$router.push("/product/index/image")
    }
  },
  mounted() {
    home().then(res => {
      this.homelist = res.data.data;
      const { userCount, productCount, orderCount } = res.data.data;
      this.userCount = userCount;
      this.productCount = productCount;
      this.orderCount = orderCount;
    });
  }
};
</script>


<style lang="scss" scoped>
@import "@/Scss/index.scss";
.introduce {
  color: #fff;
}
.count {
  line-height: 65px;
  font-weight: 500;
  @include Font(40px, #fff);
}
.content_item1 {
  @include Bg(#f0ad4e);
}
.content_item2 {
  @include Bg(#5cb85c);
}
.content_item3 {
  @include Bg(#4cb1cf);
}

.bg-purple:hover {
  transform: scale(1.08);
  transition: all 0.5s;
}
.bg-purple:hover span {
  color: #333;
}
.home_content {
  width: 95%;
  margin: 0 auto;
}

.title {
  display: inline-block;
  font-weight: normal;
}
.bg-purple {
  text-align: center;
  @include FlexMenu();
  min-height: 160px;
}
</style>
